<template>
	<view class="page-container">
		<template v-if="status != 1">
			<view class="table-view-group">
				<view class="table-cell-bar">
					<view class="table-cell-block">
						<view class="table-cell-block__hd">真实姓名</view>
						<view class="table-cell-block__bd">
							<input class="item-input" type="text" v-model="userName" placeholder="请输入真实姓名" />
						</view>
					</view>
				</view>
				<view class="table-cell-bar">
					<view class="table-cell-block">
						<view class="table-cell-block__hd">身份证号</view>
						<view class="table-cell-block__bd">
							<input class="item-input" type="text" v-model="idCard" placeholder="请输入15或18位身份证号码" />
						</view>
						<view class="table-cell-block__fd" :hidden="!idCard"  @click="clearIdCard">
							<text class="iconfont control-clear-icon">&#xe688;</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		
		
		<view class="upload-file-block" v-if="status == 0 || status == 3">
			<view class="upload-file-block__bar">上传证件</view>
			<view class="upload-file-block__con">
				<view class="upload-file-item" @click="chooseImages('front')">
					<image v-if="idcard_positive_show" :src="idcard_positive_show" mode="aspectFit" style=" width: 312rpx; height: 224rpx;"></image>
					<image v-else :src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'upload_card_front.png'" mode="aspectFit"></image>
				</view>
				<view class="upload-file-item" @click="chooseImages('back')">
					<image v-if="idcard_negative_show" :src="idcard_negative_show" mode="aspectFit" style=" width: 312rpx; height: 224rpx;"></image>
					<image v-else :src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'upload_card_back.png'" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<st-empty-msg v-if="status==1" :noPic="noPic" :iconStyle="iconStyle" noMsg="资料审核中" :showHande="showHande"></st-empty-msg>
		<view class="remarks" v-if="status ==0 || status == 3"><text class="iconfont">&#xe682;</text>仅支持JPG，PNG,格式图片，大小不超过2M，要求姓名和身份证清晰可见</view>
		<button :class="['save-btn-block', isCheckEmpty ? '' : 'disabled']" @click="clickMe"  v-if="status ==0 || status == 3">提交</button>
	</view>
</template>

<script>
	import stEmptyMsg from '@/components/st-empty-msg/st-empty-msg.vue'
	import {dealStrNull} from '@/utils/utils.js'
	import { pathToBase64 } from '@/utils/image-tools.js'
	export default {
		components:{
			stEmptyMsg
		},
		data() {
			return {
				userName: '',
				idCard: '',
				idcard_positive: '',//正面照片
				idcard_positive_show:'',
				idcard_negative: '',//反面照片
				idcard_negative_show: '',
				imageInfo: {},
				status: 0 ,
				noPic: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'waiting_audit_icon.png' ,
				iconStyle: {} ,
				showHande: false ,
			}
		},
		computed: {
			isCheckEmpty(){
				return this.idCard && this.userName && this.idcard_negative && this.idcard_positive
			}
		},
		onLoad(options) {
			let userInfo = uni.getStorageSync('userInfo');
				userInfo = dealStrNull(userInfo);
			let idcardPhoto = userInfo.idcard_pic
			this.idcard_positive_show = idcardPhoto.front_pic
			this.idcard_negative_show = idcardPhoto.verso_pic
			this.userName = userInfo.truename
			this.idCard = userInfo.cardid
			this.status = options.verifystatus
		},
		methods: {
			//提交
			async clickMe(){
				if( !this.userName || !this.idCard || !this.idcard_positive || !this.idcard_negative ){
					return uni.showToast({
						title:'请填写身份证信息',
						icon:"none"
					})
				}
				uni.showLoading({
					title: '保存中...'
				})
				let params = {
					method:'api/v2/member/info/real_name',
					truename:this.userName,
					cardid:this.idCard,
					idcard_positive:this.idcard_positive,
					idcard_negative:this.idcard_negative,
				}
				let res = await this.$http(params)
				uni.hideLoading();
				if( res.status ){
					//保存成功
					let params1 = {
						method: "api/v2/member/info/show"
					};
					let res1 = await this.$http(params1)
					if( res1.data ){
						//更新缓存
						uni.setStorageSync('userInfo', res1.data);
					}
					uni.showToast({
						title: '保存成功',
						icon:'none',
						duration:1500,
						success() {
							setTimeout(function(){
								uni.navigateBack({})
							},2000)
						}
					});
				}else{
					uni.showToast({
						title: res.msg,
						icon:'none'
					});
				}
				
			},
			
			// 选择图片
			chooseImages(type){
				let self = this;
				uni.chooseImage({
				    count: 1, 
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
				    success: (res) => {
						uni.showLoading({
							title: '图片转换中...'
						})
						if(type === 'front'){
							this.idcard_positive_show = res.tempFilePaths[0]
						}else{
							this.idcard_negative_show = res.tempFilePaths[0]
						}
						const tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths).then(data => {
							uni.hideLoading();
							if(type === 'front'){
								this.idcard_positive = data
							}else{
								this.idcard_negative = data
							}
						}).catch(error => {
						    
						})				
					}
				});
				
			},
			
			//清除身份证号
			clearIdCard(){
				this.idCard = ''
			},
			
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 24rpx;
		position: relative;
		overflow: hidden;
	}
	.table-view-group{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
	}
	.table-cell-bar{
		padding: 0 20rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 20rpx;
			left: 20rpx;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		&__hd{
			flex: 0 0 auto;
			width: 180rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $uni-font-size-base;
		}
		&__bd{
			flex: 1 1 auto;
		}
		&__fd{
			height: 48rpx;
			line-height: 48rpx;
			flex: 0 0 auto;
			.iconfont{
				display: inline-block;
				vertical-align: top;
				margin-left: 12rpx;
			}
		}
	}
	.upload-file-block{
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;
		&__bar{
			padding: 24rpx;
			font-size: $uni-font-size-base;
		}
		&__con{
			display: flex;
			padding: 12rpx;
		}
	}
	
	.upload-file-item{
		flex: 1 1 auto;
		margin: 12rpx;
		padding: 24rpx 0;
		text-align: center;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-grey;
		image{
			width: 213rpx;
			height: 177rpx;
			vertical-align: middle;
		}
	}
	
	.save-btn-block{
		color: $uni-text-color-inverse;
		padding: 4rpx 0;
		text-align: center;
		margin-top: 40rpx;
		font-size: $uni-font-size-lg;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary;
		&:after{
			display: none;
		}
		&.disabled{
			color: $uni-text-color-inverse;
			background-color: #bdefd6;
		}
	}
	.remarks{
		position: relative;
		padding-left: 40rpx;
		font-size: $uni-font-size-sm;
		.iconfont{
			color: #f80;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.item-input{
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 30rpx;
		font-size: $uni-font-size-base;
	}
	.canvas_image{
		position: absolute;
		top: 10000000rpx;
		opacity: 0;
	}
</style>
